<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <!-- 引入jQuery库 -->
    <script src="https://cdn.bootcss.com/jquery/3.5.1/jquery.min.js"></script>

    <!-- 引入Bootstrap库 -->
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

    <!-- 引入bootstrap-table库 -->
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap-table/1.16.0/bootstrap-table.min.css">
    <script src="https://cdn.bootcss.com/bootstrap-table/1.16.0/bootstrap-table.min.js"></script>

    <!-- 引入bootstrap-table-tree插件 -->
    <script src="https://cdn.bootcss.com/bootstrap-table/1.16.0/extensions/tree/bootstrap-table-tree.min.js"></script>

</head>

<body>

<style>
    .child-row {
        display: none;
    }
</style>

<table>
    <thead>
    <tr>
        <th>列1</th>
        <th>列2</th>
        <th>操作</th>
        <th></th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>行1列1</td>
        <td>行1列2</td>
        <td><button class="toggle-child-row"><i class="fa fa-plus"></i></button></td>
        <td></td>
    </tr>
    <tr class="child-row">
        <td>行1子项1</td>
        <td>行1子项2</td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td>行2列1</td>
        <td>行2列2</td>
        <td><button class="toggle-child-row"><i class="fa fa-plus"></i></button></td>
        <td></td>
    </tr>
    <tr class="child-row">
        <td>行2子项1</td>
        <td>行2子项2</td>
        <td></td>
        <td></td>
    </tr>
    <!-- 更多行和子项 -->
    </tbody>
</table>

<script>
    // 为每个按钮添加点击事件监听器
    var toggleButtons = document.querySelectorAll('.toggle-child-row');
    toggleButtons.forEach(function(button) {
        button.addEventListener('click', function() {
            // 查找当前行的下一行
            var nextRow = this.parentNode.parentNode.nextElementSibling;

            // 切换下一行的可见性
            if (nextRow.classList.contains('child-row')) {
                if (nextRow.style.display === 'none') {
                    nextRow.style.display = 'table-row';
                    this.innerHTML = '<i class="fa fa-minus"></i>';
                } else {
                    nextRow.style.display = 'none';
                    this.innerHTML = '<i class="fa fa-plus"></i>';
                }
            }
        });
    });
</script>


</body>
</html>